<template>
  <div class="app-container">
    <vxe-form
      ref="queryForm"
      class="queryForm"
      :data="query.baseParams"
      title-align="right"
      title-width="90"
      :rules="queryFormRules"
      @submit="confirmBaseQueryData"
    >
      <vxe-form-item field="id" title="KEY" :item-render="{}" :span="isMobile?24:6">
        <template #default="{data}">
          <el-input v-model="data.jsonData" clearable />
        </template>
      </vxe-form-item>
      <vxe-form-item>
        <template #default>
          <vxe-button status="primary" type="submit">查询</vxe-button>
          <vxe-button type="button" @click="restBaseForm">重置</vxe-button>
        </template>
      </vxe-form-item>
    </vxe-form>
    <vxe-toolbar custom export>
      <template #buttons>
        <vxe-button status="success" @click="showModal('create',{})">新增</vxe-button>
      </template>
    </vxe-toolbar>
    <vxe-table
      ref="vxeTable"
      :loading="tableLoading"
      :export-config="{}"
      :data="tableData"
      @sort-change="tableSortChange"
    >
      <vxe-column type="seq" align="right" width="40" />
      <vxe-column field="id" title="KEY" sortable />
      <vxe-column field="jsonData" title="DATA" sortable show-overflow />
      <vxe-column field="createTime" title="创建时间" sortable />
      <vxe-column field="updateTime" title="修改时间" sortable />
      <vxe-column field="createByName" title="创建人" sortable />
      <vxe-column field="updateByName" title="修改人" sortable />
      <vxe-column field="op" title="操作">
        <template #default="{row}">
          <vxe-button type="text" status="primary" @click="showModal('update',row)">编辑</vxe-button>
          <vxe-button type="text" status="danger" @click="deleteTableRow(row.id)">删除</vxe-button>
        </template>
      </vxe-column>
    </vxe-table>
    <vxe-pager
      background
      :current-page.sync="query.page.currentPage"
      :page-size.sync="query.page.pageSize"
      :total="tableTotalRow"
      :layouts="['PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']"
      @page-change="changePage"
    />
    <create-dialog
      v-if="dialogs.create.visible"
      v-model="dialogs.create.visible"
      :form-data="dialogs.create.formData"
      @success="loadTable"
    />
    <update-dialog
      v-if="dialogs.update.visible"
      v-model="dialogs.update.visible"
      :form-data="dialogs.update.formData"
      @success="loadTable"
    />
  </div>
</template>

<script>
import Api from '@/api/upms/config'
import CreateDialog from './dialog/CreateDialog'
import UpdateDialog from './dialog/UpdateDialog'
import { VxeTableMixin } from '@/mixins/vxe/VxeTableMixin'
export default {
  name: 'UpmsConfig',
  components: { CreateDialog, UpdateDialog },
  mixins: [VxeTableMixin],
  data() {
    return {
      api: {
        query: Api.page,
        delete: Api.delete
      },
      query: {
        baseParams: {
          id: undefined,
          jsonData: undefined,
          createTime: undefined,
          updateTime: undefined,
          createByName: undefined,
          updateByName: undefined
        }
      },
      dialogs: {

      }
    }
  },
  computed: {

  },
  mounted() {
    this.confirmBaseQueryData()
  },
  methods: {

  }
}
</script>

<style>

</style>
